.red-package-info{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}


.package-info{
  width: 540rpx;
  height: 750rpx;
  background-color: #f64b37;
  border-radius: 8rpx;
  .package-content{
    position: relative;
    width: 100%;
    height: 600rpx;
    background-color: #f65a45;
    border-radius: 0 0 50% 50%/0 0 20% 20%;
    box-shadow: 0 -10rpx 10rpx rgba(0,0,0,0.1);
    .user-package{
      position: absolute;
      left: 0;
      top: 140rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      .pic{
        display: flex;
        align-items: center;
        margin-right: 10rpx;
        image{
          width: 40rpx;
          height: 40rpx;
          border-radius: 6rpx;
        }
      }
      .name{
        display: flex;
        align-items: center;
        text{
          font-size: 24rpx;
          color: #ebcd99;
        }
      }
    }
    .title-package{
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      top: 190rpx;
      left: 0;
      width: 100%;
      text{
        font-size: 32rpx;
        color: #ebcd99;
      }
    }
    .open-btn{
      position: absolute;
      left: 0;
      bottom: -60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      transform-style: preserve-3d;
      .btn{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120rpx;
        height: 120rpx;
        background-color: #ebcd99;
        border-radius: 100%;
        text{
          font-size: 38rpx;
          font-weight: bold;
          color: #1c1f24;
        }
      }
      .loading-btn{
        animation: overturn 3s infinite;
      }
      @keyframes overturn {
        0% {
          transform: rotateY(0deg);
        }

        100% {
          transform: rotateY(360deg);
        }
      }
      .hint{
        display: flex;
        align-items: center;
        text{
          font-size: 28rpx;
          font-weight: bold;
          color: #ebcd99;
        }
      }
    }
  }
}
.close-btn{
  position: absolute;
  left: 0;
  bottom: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  .btn{
    display: flex;
    align-items: center;
    image{
      width: 60rpx;
      height: 60rpx;
    }
  }
}
